<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>使用v-model指令</title>
    </head>
    <body>

        <h3>在自定义组件上使用 v-model 指令</h3>
        <p>
            基于 vue.js 3.2.31 测试。
            <a href="https://v3.cn.vuejs.org/guide/component-basics.html#在组件上使用-v-model">
                官方举例
            </a>
        </p>

        <div id="root">
            <p>counter: {{ counter }}</p>
            <!-- 在子组件上使用 v-model 指令 -->
            <handler v-model="counter"></handler>
            <!-- 在子组件上使用 v-model 等同于以下操作 -->
            <!-- <handler :model-value="counter" @update:model-value="handlerUpdate"></handler> -->
            <!-- 默认通过 `model-value` attribute 向子组件传递 counter 属性值 -->
            <!-- 子组件应该通过触发 `update:model-value` 事件来向父组件传递数值(即更改counter属性值) -->
        </div>

         <!-- 导入 vue.js 3.x 核心库 -->
         <script src="../scripts/vue@3.2.31.js"></script>

         <script>

             const Handler = {
                 // 通过 modelValue 接受由父组件通过 v-model 绑定的数据
                 props: [ 'modelValue' ],
                 template: `<button @click="handlerClick">+1</button>`,
                 data(){
                     return { value: this.modelValue }
                 },
                 methods: {
                     handlerClick(){
                         this.value++;
                         // 触发 `update:modelValue` 事件
                         this.$emit( 'update:modelValue' , this.value );
                     }
                 }
             }

             const options = {
                data(){
                    return { 
                        counter: 1 
                    }
                },
                methods: {
                    handlerUpdate(value){
                        this.counter = value ;
                    }
                },
                components: {
                    // 注册子组件
                    'handler' : Handler
                }
             }
             Vue.createApp(options).mount('#root');
         </script>
        
    </body>
</html>